<template>
  <!-- 原来每次都是new的同一个元素，现在用ref每次都是不同的元素 -->
  <div class="swiper" ref="swiper">
    <div class="swiper-wrapper">
      <!-- 因为照片在本地，webpack打包前还没有加载，所以不会被打包，需要将照片放在public文件夹中 -->
      <!-- 因为public文件夹中的资源都会被打包，项目中不会有这种情况，因为项目中的照片一般都是线上的地址引入 -->
      <div
        class="swiper-slide"
        v-for="banner in homeBannersList"
        :key="banner.id"
      >
        <img :src="banner.imgUrl" :alt="`banner${banner.id}`" />
      </div>
    </div>
    <!-- 左右切换按钮 -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
    <!-- 小圆圈按钮 -->
    <div class="swiper-pagination"></div>
  </div>
</template>

<script>
import Swiper from 'swiper/bundle'
import 'swiper/css/bundle'
export default {
  name: 'MyBanner',
  props: {
    homeBannersList: Array
  },
  watch: {
    homeBannersList: {
      //让监视属性上来就触发一次
      immediate: true,
      handler(newVal) {
        // 让第一个轮播图第一次触发watch，数据为空的时候，return
        if (!newVal.length) return
        // 等DOM元素加载完后再触发Swiper
        this.$nextTick(() => {
          // 必须保证DOM元素生成好才能创建轮播图
          // 每次将new Swiper的实例放入this.$refs.swiper(他每次都是不同的元素)中
          new Swiper(this.$refs.swiper, {
            // effect: 'fade', // 切换效果
            spaceBetween: 10, //每一屏之间的距离
            speed: 2000, //屏的切换速度
            //自动轮播
            autoplay: {
              //自动轮播配置
              delay: 2000, //轮播间隔事件
              disableOnInteraction: false //鼠标操作后，是否禁用自动轮播
            },
            loop: true, // 循环模式选项
            // 如果需要分页器(小圆点)
            pagination: {
              el: '.swiper-pagination',
              clickable: true //点击小圆点跳转
            },
            // 左右切换箭头
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev'
            }
          })
        })
      }
    }
  }
}
</script>

<style></style>
